<template>
	<div>
		<!-- 轮播图区域 -->
		<mt-swipe :auto="4000">
            <mt-swipe-item><img src="https://b-ssl.duitang.com/uploads/item/201711/04/20171104212141_xUV52.thumb.700_0.jpeg"/></mt-swipe-item>
			<mt-swipe-item><img src="https://b-ssl.duitang.com/uploads/item/201710/04/20171004182817_QEzTm.jpeg"/></mt-swipe-item>
			<mt-swipe-item><img src="https://a-ssl.duitang.com/uploads/item/201710/04/20171004180117_wF4ZQ.thumb.700_0.jpeg" /></mt-swipe-item>
		</mt-swipe>
		<ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/newslist">
                    <span class="mui-icon mui-icon-home"></span>
                    <div class="mui-media-body">新闻资讯</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
                    <div class="mui-media-body">Email</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <span class="mui-icon mui-icon-chatbubble"></span>
                    <div class="mui-media-body">Chat</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <span class="mui-icon mui-icon-location"></span>
                    <div class="mui-media-body">location</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <span class="mui-icon mui-icon-search"></span>
                    <div class="mui-media-body">Search</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <span class="mui-icon mui-icon-phone"></span>
                    <div class="mui-media-body">Phone</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <span class="mui-icon mui-icon-gear"></span>
                    <div class="mui-media-body">Setting</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <span class="mui-icon mui-icon-info"></span>
                    <div class="mui-media-body">about</div></a></li>
           <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <span class="mui-icon mui-icon-more"></span>
                    <div class="mui-media-body">more</div></a></li>
	    </ul> 
	</div>
</template>

<script>
</script>

<style lang="scss" scoped>

.mint-swipe{
	height: 200px;

	.mint-swipe-item:nth-child(1) {
		background-color: darkblue;
	}
	.mint-swipe-item:nth-child(2) {
		background-color: blue;
	}
	.mint-swipe-item:nth-child(3) {
		background-color: skyblue;
	}

    img{
        width: 100%;
        height: 100%;
    }
}
</style>